import h from './mysnabdom/h.js'

import patch from './mysnabdom/patch.js'

const myVnode1 = h("ol", {}, [
  h("li", {}, "A"),
  h("li", {}, "B"),
  h("li", {}, "C"),
 
]);
// const myVnode1= h("ul", {},'55555');

// const myVnode1 = h("h1", {}, 'hello world');

const containter=document.getElementById('container')

const btn=document.getElementById('btn')
// console.log(myVnode1);
patch(containter,myVnode1)

// const myVnode2= h("ul", {},'55555');

const myVnode2 = h("ol", {}, [
  // h("li", {}, "A"),
  // h("li", {}, "B"),
  // h("li", {}, "aa"),
  // h("li", {}, "bb"),

  // h("li", {key:4}, "D"),
  // h("li", {key:1}, "A"),
  // h("li", {key:2}, "B"),
  h("li", {}, "D"),
  h("li", {}, "A"),
  h("li", {}, "B"),
 

  ]);
  

btn.onclick=function(){
    patch(myVnode1,myVnode2)
}


/*

   1.patch函数上树 
     第一大种情况 传入的第一个参数是ＤＯＭ节点不是虚拟节点
     第二大种情况    新旧是同一个对象    (这个情况就比较复杂了)
           第一小种情况 新旧一样 不做处理
           第二小种情况 新的有text属性 且 newVnode.text!=oldVnode.text 直接把新的text 赋值给老的elm的innerHTML上
           第三小种情况  新的有children 老的没有children   遍历新vnode的子节点  创建DOM 上树 循环上树的
           第四小种情况   新的有children 老的有children (这种的最复杂)
                1.新前与旧前 
                2.新前与旧后  此时要移动节点 移动新前指向的这个节点到老节点的旧前的前面
                3.新后与旧前  此时要移动节点 移动新前指向的这个节点到老节点的旧后的后面
                4.新后与旧后 
                   
                W     E
                B     C
                C     B
                E     A

            如果上面四种都没有发现则用for循环  如果是全新的项插入 如果不是查找然后移动 把这项设置为undefined，表示我已经处理完这项了
                  
     第三大种情况    新旧不是同一个对象  把原来的干掉 加入新的 相对比较简单


*/